<template>
  <div class="dashboard-container">
    <el-row :gutter="40" class="panel-ground">
      <el-col :xs="12" :sm="12" :lg="6" class="panel-card-col">
        <div class="card-panel">
          <div class="card-icon-wrapper icon-people">
            <svg-icon icon-class="peoples" class-name="card-panel-icon" />
          </div>
          <div class="card-description">
            <div class="card-description-text">Num</div>
            <div class="card-description-num">123456</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="panel-card-col">
        <div class="card-panel">
          <div class="card-icon-wrapper icon-people">
            <svg-icon icon-class="peoples" class-name="card-panel-icon" />
          </div>
          <div class="card-description">
            <div class="card-description-text">Num</div>
            <div class="card-description-num">123456</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="panel-card-col">
        <div class="card-panel">
          <div class="card-icon-wrapper icon-people">
            <svg-icon icon-class="peoples" class-name="card-panel-icon" />
          </div>
          <div class="card-description">
            <div class="card-description-text">Num</div>
            <div class="card-description-num">123456</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="panel-card-col">
        <div class="card-panel">
          <div class="card-icon-wrapper icon-people">
            <svg-icon icon-class="peoples" class-name="card-panel-icon" />
          </div>
          <div class="card-description">
            <div class="card-description-text">Num</div>
            <div class="card-description-num">123456</div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  activated() {
    console.log('首页被激活')
  },
  // keep-alive钩子函数：组件消失，被缓存时调用
  deactivated() {
    console.log('首页被缓存')
  }
}
</script>
<style lang="scss" scoped>
.dashboard-container{
  padding: 32px;
}
.panel-ground {
  .panel-card-col {

    .card-panel{
      height: 108px;
      background: red;
      overflow: hidden;
    }
    .card-icon-wrapper{
      padding:16px;
      margin:14px 0 0 14px;
      float:left;
      .card-panel-icon{
        font-size: 48px;
      }
    }
  }
}
</style>
